<template>
  <div class="user-info-page">
    <t-navbar title="个人资料编辑" left-arrow @left-click="backPage" :fixed="true"/>
    
    <div class="form-container">
      <t-form
          ref="form"
          :data="userinfo"
          :rules="rules"
          reset-type="initial"
          show-error-message
          label-align="left"
          scroll-to-first-error="auto"
          @submit="updateInfo"
      >
        <!-- 头像上传 -->
        <t-form-item label="头像" name="photo">
          <t-upload
              class="upload"
              max="1"
              :multiple="false"
              v-model="files"
              :on-success="uploadSuccess"
              :action="upurl">
          </t-upload>
          <div v-if="files.length" class="avatar-preview">
            <t-image :src="files[0].url" fit="cover" class="avatar-img" />
          </div>
        </t-form-item>

        <!-- 基本信息 -->
        <div class="section-title">基本信息</div>
        <t-form-item label="昵称" name="nickname" >
          <t-input v-model="userinfo.nickname" borderless placeholder="输入用户昵称" />
        </t-form-item>
        <t-form-item label="性别" name="sex">
          <t-radio-group v-model="userinfo.sex" class="box" borderless>
            <t-radio :block="false" name="radio" value="男" label="男" />
            <t-radio :block="false" name="radio" value="女" label="女" />
            <t-radio :block="false" name="radio" value="保密" label="保密" />
          </t-radio-group>
        </t-form-item>
        <t-form-item arrow label="生日" name="birthday" content-align="right">
          <t-input
              v-model="userinfo.birthday"
              borderless
              align="right"
              placeholder="请输入你的生日"
              @click="bvisible = true"
          ></t-input>
          <t-popup v-model="bvisible" placement="bottom">
            <t-date-time-picker
                :value="userinfo.birthday"
                :mode="['date']"
                title="选择出生日期"
                start="1950-1-1"
                format="YYYY-MM-DD"
                @confirm="confirmDate"
                @cancel="bvisible=false"/>
          </t-popup>
        </t-form-item>

        <!-- 签名 -->
        <div class="section-title">个人签名</div>
        <t-form-item label="签名" name="info">
          <t-textarea
              v-model="userinfo.info"
              class="textarea"
              indicator
              :maxlength="50"
              placeholder="请输入个人签名"
          ></t-textarea>
        </t-form-item>

        <t-button style="margin-top: 20px" theme="primary" type="submit" block size="small">修改资料</t-button>
      </t-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { post } from "../util/Request";
import { SuccessContext, Toast } from "tdesign-mobile-vue";
import router from "../router";

const json = sessionStorage.getItem("detail");
const bvisible = ref(false);
const userinfo = ref(JSON.parse(json) || {});

const upurl = ref("http://localhost:8181/api/uDetail/updateimg?id=" + userinfo.value.id);
const files = ref([{
  url: userinfo.value.imageurl,
  name: 'uploaded1.png',
  type: 'image',
}]);

const rules = {
  nickname: [{ validator: (val: any) => val.length <= 8, message: '昵称不能超过8个字符' }],
  sex: [{ validator: (val: any) => val !== '', message: '性别不能为空' }],
  birthday: [{ validator: (val: any) => val !== '', message: '生日不能为空' }],
  info: [{ validator: (val: any) => val !== '', message: '签名不能为空' }],
};

const confirmDate = (value: string) => {
  userinfo.value.birthday = value;
  bvisible.value = false;
};

const updateInfo = () => {
  post("uDetail/updatedetail", userinfo.value).then(res => {
    if (res.data.code == 200) {
      sessionStorage.setItem("detail", JSON.stringify(userinfo.value));
      Toast("个人资料修改成功");
      router.push('/');
    } else {
      Toast(res.data.data);
    }
  });
};

const uploadSuccess = (context: SuccessContext) => {
  files.value[0].url = context.response.data;
  userinfo.value.imageurl = context.response.data;
  sessionStorage.setItem("detail", JSON.stringify(userinfo.value));
};

const backPage = () => {
  history.back();
};
</script>

<style scoped>
.user-info-page {
  background: #f5f7fa;
  min-height: 100vh;
  padding: 16px;
}

.form-container {
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 16px 0 8px;
  color: #333;
}

.avatar-preview {
  margin-top: 10px;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.textarea {
  width: 100%;
}
</style>